<%@ page language="java" contentType="text/html; UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>添加商品</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
	content="width=device-width, initial-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	<script type="text/javascript">var contextPath = "<%=request.getContextPath()%>"</script>
	<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.form.js"></script>
	<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js"></script>
	<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css"/>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/amazeui.ajaxload.css"/>
</head>
<body>
	<form id="upload_img" style="display:none;">
		<input type="file" id="uploadImgInput" name="uploadImg" />
	</form>
	<!-- am-gallery am-avg-sm-2  am-avg-md-3 am-avg-lg-4 am-gallery-bordered -->
	<ul data-am-widget="gallery" class="am-gallery am-avg-sm-1  am-avg-md-2 am-avg-lg-4 am-gallery-bordered" data-am-gallery="{  }" >
	      <li>
	        <div class="am-gallery-item">
	              <img id="goodsImg" src="<%=request.getContextPath()%>/img/upload_default.png"  alt="远方 有一个地方 那里种有我们的梦想"/>
	              <form id="main-form" class="am-form">
	              <input type="hidden" name="goodsId" value="" />
	              <input type="hidden" name="customerId" value="" />
	              <input type="hidden" name="goodsImgUrl" value=""/>
	              <fieldset>
	              <div class="am-form-group">
	              		<div>
		                	 <input type="text" class="" style="width:40%;display:inline-block" name="goodsName" placeholder="商品名称">
	              		</div>
	                	 </div>
	               <div class="am-form-group">
		                	 <input type="number" style="width:25%;display:inline-block" class="" name="goodsCount" placeholder="数量">
		            		 <input type="text" style="width:25%;display:inline-block" class="" name="goodsUnit" placeholder="单位">
		                	 <input type="text" style="width:35%;margin-left:10px;display:inline-block" name="goodsCategory" class="" placeholder="分类">
	                </div>
	              <div class="am-form-group">
						  <input type="text" style="width:70px;display:inline-block"  class="" name="goodsBrand" placeholder="品牌">
						  <input type="text" style="width:100px;margin-left:10px;display:inline-block"  class="" name="shopBatch" placeholder="批次">
						  </div>
	              <div class="am-form-group">
	             		 <label >客户信息</label>
	             		 <div>
						 <input type="text" style="width:40%;display:inline-block;" class="" name="customerName" placeholder="客户名">
						 <input type="text" style="width:45%;margin-left:10px;display:inline-block;" name="customerPhone" class="" placeholder="客户phone">
	             		 </div>
						  </div>
	       
	              <div class="am-form-group">
						 <div class="am-gallery-desc"><input type="text" class="" style="width:100%;" name="customerAddr" placeholder="客户address">
						 </div>
					</div>
					<button id="mysubmit" type="button" class="am-btn am-btn-default">提交</button>
	              </fieldset>
	              </form>
	        </div>
	      </li>
	  </ul>



		<!-- 定义模态窗体-->
		<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
		  <div class="am-modal-dialog">
		    <div class="am-modal-hd">小丹代购</div>
		    <div class="am-modal-bd">
		      	给商品添加图片
		    </div>
		    <div class="am-modal-footer">
		      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
		      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
		    </div>
		  </div>
		</div>

	  <script type="text/javascript" src="<%=request.getContextPath()%>/js/amazeui.ajaxLoad.js"></script>
      <script type="text/javascript">
      	$(function(){
			
      		$("#upload_img").find("input").change(function(){
      			debugger;
	      		  $("#upload_img").ajaxSubmit({
			            type : 'post',
			            url : contextPath+"/goods/uploadGoodsImg.do",
	
						//data:  //注意只要是写在表单里面的，都不需要加这个属性。在controller中可以根据@RequestParam String str获取到属性值。    
						contentType : "application/x-www-form-urlencoded; charset=utf-8",
						success: function(data) {
									$("input[name=goodsName]").popover('close');
									$("input[name=customerName]").popover('close');
									//接受到的data还只是一个字符串，需要转成json对象
									var obj = JSON.parse(data);
									if(obj.success){
										var filePath = obj.data;
										$("input[name=goodsImgUrl]").val(filePath);
										$("#goodsImg").attr("src",contextPath + filePath);
									}else{
										alert("error");
									}
								},
						error: function (data){//服务器响应失败处理函数
								alert("出错");
								}
					});
      		});
      		$("img").click(function(){

				 $('#my-confirm').modal({
				        relatedTarget: this,
				        onConfirm: function(options) {
				          $("#upload_img").find("input").click();
				        },
				        // closeOnConfirm: false,
				        onCancel: function() {
				          //否定确认事件
				        }
				 });

      		});
			
      		//提交商品信息
      		$("#mysubmit").click(function(){
      			   // TODO 提交数据校验
        		  $("#main-form").ajaxSubmit({
			            type : 'post',
			            url : contextPath+"/goods/saveGoods.do",
						success: function(data) {
									//接受到的data还只是一个字符串，需要转成json对象
									var obj = JSON.parse(data);
									if(obj.success){
										var customerId = data.customerId;
										$("input[name=customerId]").val(customerId);
										//删除商品信息：商品名字，商品图片，商品数量，商品品牌，商品分类不删，商品单位不删除
										$("input[name=goodsName]").val("");
										$("input[name=goodsCount]").val("");
										$("input[name=goodsBrand]").val("");
										$("input[name=goodsImgUrl]").val("");
										debugger;
										$("#upload_img")[0].reset();
										
										$("#goodsImg").attr("src",contextPath+"/img/upload_default.png");
										
									}else{
										alert("error");
									}
								},
						error: function (data){//服务器响应失败处理函数
								alert("出错");
								}
					});
      		});
 			$("input[name=goodsName]").inputLoad({
 				url:contextPath+'/goods/ajaxLoad.do',
 				searchFeild:'goodsName',
 				showFeild:'goodsName',
 				selectEvent:function(data,_this){
 					debugger;
 					$(_this).val(data.goodsName);
 					//单位goodsUnit
 					$("input[name=goodsUnit]").val(data.goodsUnit);
 					//分类goodsCategory
 					$("input[name=goodsCategory]").val(data.goodsCategoryName);
 					//品牌goodsBrand
 					$("input[name=goodsBrand]").val(data.goodsBrand);
 					
 					$("input[name=goodsId]").val(data.goodsId);
 				},
 			});
 			$("input[name=customerName]").inputLoad({
 				url:contextPath+'/customer/ajaxLoad.do',
 				searchFeild:'customerName',
 				showFeild:'customerName',
 				selectEvent:function(data,_this){
 					$(_this).val(data.customerName);
 					$("input[name=customerPhone]").val(data.customerName);
 					$("input[name=customerAddr]").val(data.customerAddr);
 					$("input[name=customerId]").val(data.customerId);
 				},
 			});
      	    
      	});

      </script>
</body>
</html>